<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6_Vue检测数据改变的原理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        Vue监视数据的原理：
        1. vue会监视data中所有层次的数据。
        2. 如何监测对象中的数据？
            通过setter实现监视，且要在new Vue时就传入要监测的数据。
            (2)，如雷给后添加的属性做响应式，请使用如下API：
            (1)，对象中后追加的属性，Vue默认不做响应式处理  Vue,set(target, propertyName/index, value)或 vm.$set(target, propertyName/index, value)
        3. 如何监测数组中的数据？
            通过包裹数组更新元素的方法实现，本质就是做了两件事：
            (1).调用原生对应的方法对数组进行更新。
            (2)，重新解析模板，进而更新页面。
        4.在Vue修改数组中的某个元素一定要用如下方法：
        
            1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse
            2.Vue.set()或 vm.$set()
        
        
        特别注意：
            Vue.set（） 和 vm.$set（）不能给vm 或 vm的根数据对象 添加属性！！

        
    -->

    <!-- 准备一个容器 -->
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{sName}}</h2>
        <h2>学校地址：{{addr}}</h2>
        <hr>
        <h1>学生信息</h1>
        <input type="text" placeholder="男" v-model:value="defaultSex">
        <button v-on:click="addStuSex">添加一个性别属性，默认男</button>
        <button @click="delStuSex">删除性别属性</button>
        <h2>姓名：{{stu.name}}</h2>
        <h2 v-show="stu.sex">性别：{{stu.sex}}</h2>
        <h2>年龄：{{stu.age}}</h2>
        <h2>朋友们</h2>
        <ul><li v-for="(f,index) in stu.friends" ::key="index">
            {{f.name}}-{{f.age}}
        </li></ul>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data(){
                return{
                    sName:"白兰小学",
                    addr:'五台陈家庄白兰',
                    defaultSex:'',
                    stu:{
                        name:'王小莉',
                        age:18,
                        // sex:'',
                        friends:[{name:'Tony',age:3},{name:'张三',age:7}]
                    }
                }
            },
            methods: {
                addStuSex(){
                    // Vue.set(this.stu,'sex',this.defaultSex === '' ? '男' : this.defaultSex) //方案一
                    this.$set(this.stu,'sex',this.defaultSex === '' ? '男' : this.defaultSex) //方案二
                },
                delStuSex(){
                    this.$set(this.stu,'sex','undefined') 
                }
            },
        })
    </script>
</body>

</html>